<template>
  <div class="app-main">
    <topCommon />
    <div class="views-page">
      <router-view v-slot="{ Component, route }">
        <!-- <transition name="el-fade-in-linear"> 启动动画-->
        <keep-alive v-if="route.meta.keepAlive">
          <component :is="Component" />
        </keep-alive>
        <component :is="Component"
          v-else />
        <!-- </transition> -->
      </router-view>
    </div>
  </div>
</template>

<script>
  import topCommon from '@/components/top-common/index';

  export default {
    name: 'views',
    components: {
      topCommon
    }
  };
</script>

<style lang="scss" scoped>
  .app-main {
    width: 100%;
    height: 100vh;
    position: relative;
    .views-page {
      position: relative;
      background-color: $--page-bg;
      overflow: hidden;
      height: calc(100vh - 60px);
    }
  }
</style>